<template>
  <!-- 绘制图表的容器 -->
  <div>
    <div id="barChart" style="width: 1000px; height: 1000px;"></div>
    <div id="tb" style="width: 1000px; height: 1000px;"></div>
    <div id="tb1" style="width: 1000px; height: 1000px;"></div>
    <div id="tb2" style="width: 1000px; height: 1000px;"></div>
    <div id="tb3" style="width: 1000px; height: 1000px;"></div>
    <div id="tb4" style="width: 1000px; height: 1000px;"></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import axios from "axios";

// 创建对象来存储图表数据
let chartData = {};
let jsonData = {}
let reList = {}

onMounted(() => {
  echarts1()
  echarts2()
  echarts3()
  echarts4()
  echarts5()
  echarts6()
});
const getList1 = ()=>{
  axios.get('/api/getall').then(res => {
    jsonData = res.data;
    // 解析数据，按照月份划分
    jsonData.forEach(yearItem => {
      if(!reList[yearItem.year]){
        reList[yearItem.year] = {
          month: {},
        }
      }

      yearItem.data.forEach(item => {
        if(!reList[yearItem.year].month[item.month]){
          reList[yearItem.year].month[item.month] ={
            data:{}
          }
        }
        item.data.forEach(i => {
          const category = i.category
          const value = parseFloat(i.data)
          if(!reList[yearItem.year].month[item.month].data[category]){
            reList[yearItem.year].month[item.month].data[category]={}
          }
          reList[yearItem.year].month[item.month].data[category] = value
        })
      })

    });
  })
}
getList1()
const getList2 = ()=>{
  axios.get('/api/getReceptionOfTourists').then(res => {
    jsonData = res.data;
    // 解析数据，按照月份划分
    jsonData.forEach(yearItem => {
      if(!chartData[yearItem.year]){
        chartData[yearItem.year] = {
          month: {},
        }
      }

      yearItem.data.forEach(item => {
        if(!chartData[yearItem.year].month[item.month]){
          chartData[yearItem.year].month[item.month] ={
            data:{}
          }
        }
        item.data.forEach(i => {
          const nation = i.nation
          const value = parseFloat(i.data)
          if(!chartData[yearItem.year].month[item.month].data[nation]){
            chartData[yearItem.year].month[item.month].data[nation]={}
          }
          chartData[yearItem.year].month[item.month].data[nation] = value
        })
      })
    });

  })
}
getList2()
const echarts1 = ()=>{
  setTimeout(()=>{
    // 准备图表配置项
    const option = {
      title: {
        text: '海南省2024年旅游数据汇总表',
        left: 'center',
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
        top:'5%',
      },
      xAxis: {
        type: 'value',
      },
      yAxis: {
        type: 'category',
        data:Object.keys(reList["2024年"].month) // 月份作为 Y 轴数据
      },
      series: Object.keys(reList["2024年"].month['1月'].data).map(category => ({
        name: category,
        type: 'bar',
        data: Object.keys(reList["2024年"].month).map(month => reList["2024年"].month[month].data[category]) // 遍历月份，获取对应类别的数据
      }))
    };
    // 初始化图表
    const myChart = echarts.init(document.getElementById('barChart'));
    // 使用配置项绘制图表
    myChart.setOption(option);

  },1000)
}
const echarts2 = ()=>{
  setTimeout(()=>{
    // 准备图表配置项
    const option = {
      title: {
        text: '海南省2023年旅游数据汇总表',
        left: 'center',
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
        top:'5%',
      },
      xAxis: {
        type: 'value',
      },
      yAxis: {
        type: 'category',
        data:Object.keys(reList["2023年"].month) // 月份作为 Y 轴数据
      },
      series: Object.keys(reList["2023年"].month['1月'].data).map(category => ({
        name: category,
        type: 'bar',
        data: Object.keys(reList["2023年"].month).map(month => reList["2023年"].month[month].data[category]) // 遍历月份，获取对应类别的数据
      }))
    };
    // 初始化图表
    const myChart = echarts.init(document.getElementById('tb'));
    // 使用配置项绘制图表
    myChart.setOption(option);

  },1000)
}
const echarts3 = ()=>{
  setTimeout(()=>{
    // 准备图表配置项
    const option = {
      title: {
        text: '海南省2022年旅游数据汇总表',
        left: 'center',
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
        top:'5%',
      },
      xAxis: {
        type: 'value',
      },
      yAxis: {
        type: 'category',
        data:Object.keys(reList["2022年"].month) // 月份作为 Y 轴数据
      },
      series: Object.keys(reList["2022年"].month['1月'].data).map(category => ({
        name: category,
        type: 'bar',
        data: Object.keys(reList["2022年"].month).map(month => reList["2022年"].month[month].data[category]) // 遍历月份，获取对应类别的数据
      }))
    };
    // 初始化图表
    const myChart = echarts.init(document.getElementById('tb1'));
    // 使用配置项绘制图表
    myChart.setOption(option);

  },1000)
}
const echarts4 = ()=>{
  setTimeout(()=>{
    // 准备图表配置项
    const option = {
      title: {
        text: '2024国别（地区）旅游饭店接待外国游客情况表',
        left: 'center',
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
        top:'5%',
      },
      xAxis: {
        type: 'value',
      },
      yAxis: {
        type: 'category',
        data:Object.keys(chartData["2024年"].month) // 月份作为 Y 轴数据
      },
      series: Object.keys(chartData["2024年"].month['1月'].data).map(nation => ({
        name: nation,
        type: 'bar',
        data: Object.keys(chartData["2024年"].month).map(month => chartData["2024年"].month[month].data[nation]) // 遍历月份，获取对应类别的数据
      }))
    };
    // 初始化图表
    const myChart = echarts.init(document.getElementById('tb2'));
    // 使用配置项绘制图表
    myChart.setOption(option);

  },1000)
}
const echarts5 = ()=>{
  setTimeout(()=>{
    // 准备图表配置项
    const option = {
      title: {
        text: '2023国别（地区）旅游饭店接待外国游客情况表',
        left: 'center',
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
        top:'5%',
      },
      xAxis: {
        type: 'value',
      },
      yAxis: {
        type: 'category',
        data:Object.keys(chartData["2023年"].month) // 月份作为 Y 轴数据
      },
      series: Object.keys(chartData["2023年"].month['1月'].data).map(nation => ({
        name: nation,
        type: 'bar',
        data: Object.keys(chartData["2023年"].month).map(month => chartData["2023年"].month[month].data[nation]) // 遍历月份，获取对应类别的数据
      }))
    };
    // 初始化图表
    const myChart = echarts.init(document.getElementById('tb3'));
    // 使用配置项绘制图表
    myChart.setOption(option);

  },1000)
}
const echarts6 = ()=>{
  setTimeout(()=>{
    // 准备图表配置项
    const option = {
      title: {
        text: '2022国别（地区）旅游饭店接待外国游客情况表',
        left: 'center',
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
        top:'5%',
      },
      xAxis: {
        type: 'value',
      },
      yAxis: {
        type: 'category',
        data:Object.keys(chartData["2022年"].month) // 月份作为 Y 轴数据
      },
      series: Object.keys(chartData["2022年"].month['1月'].data).map(nation => ({
        name: nation,
        type: 'bar',
        data: Object.keys(chartData["2022年"].month).map(month => chartData["2022年"].month[month].data[nation]) // 遍历月份，获取对应类别的数据
      }))
    };
    // 初始化图表
    const myChart = echarts.init(document.getElementById('tb4'));
    // 使用配置项绘制图表
    myChart.setOption(option);

  },1000)
}

</script>
